<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>loading(加载)</title>
<!-- KUI -->
<link rel="stylesheet" href="../../../style/kelat.css" media="all"/>
<!-- 扩展样式 -->
<link rel="stylesheet" href="../../../style/theme.css" media="all"/>
<style>
.ColorPalette{height:35px;
line-height:35px;
text-align:center;}
.GridShow .Row{margin-bottom:10px;}
.GridShow [class^=Col]{line-height:20px;padding:5px;margin-bottom:5px}
</style>
</head>
<body >
<div>
   <div class="HelpBox" id="WrapperArea">
   
	<h2>loading(加载)</h2>
		<h3>概述</h3>
		<div class="desc">
		<p>KUI提供了一个好用的加载指示符。 这个加载指示符使用SVG绘制，并使用CSS来进行动画，可以很方便的改变它的大小。</p>
		<p>加载指示符有2个颜色供选择：其中一个颜色是配合亮色背景，另一个颜色配合暗色背景，默认的是亮色背景。使用加载提示符非常简单，创建任意标签并加上” Loading ”类。</p>
		
		</div>
	<div class="example">
		<pre><code>&lt;div class="Row">
  &lt;div class="Col25 TC">
    &lt;div>默认&lt;/div>
    &lt;span class="Loading">&lt;/span>
  &lt;/div>
  &lt;div class="Col25 TC" style="background-color:#222;color:#fff">
    &lt;div>白色&lt;/div>
    &lt;span class="Loading LoadingWhite">&lt;/span>
  &lt;/div>
  &lt;div class="Col25 TC">
    &lt;div>大号&lt;/div>
    &lt;span class="Loading LoadingBig">&lt;/span>
  &lt;/div>
  &lt;div class="Col25 TC" style="background-color:#222;color:#fff">
    &lt;div>白色&lt;/div>
    &lt;span class="Loading LoadingWhite LoadingBig">&lt;/span>
  &lt;/div>
&lt;/div></code></pre>
		<div class="Row">
			<div class="Col25 TC">
				<div>默认</div>
				<span class="Loading"></span>
			</div>
			<div class="Col25 TC" style="background-color: #222; color:#fff;">
				<div>白色</div>
				<span class="Loading LoadingWhite"></span>
			</div>
			<div class="Col25 TC">
				<div>大号</div>
				<span class="Loading LoadingBig"></span>
			</div>
			<div class="Col25 TC" style="background-color: #222; color:#fff;">
				<div>白色</div>
				<span class="Loading LoadingWhite LoadingBig"></span>
			</div>
			
		</div>
		<ul class="List">
			<li>Loading - 加载指示符</li>
			<li>LoadingWhite - 白色的加载指示符</li>
			<li>LoadingBig - 较大尺寸的加载指示符</li>
		</ul>
		<h3>如果你需要的是一个 Modal 的加载指示，可以使用 JS 动态创建</h3>
		<h4>预加载 Modal</h4>
		<p>预加载 Modal 用来提示一些后台活动（像Ajax请求）和阻止在这个活动期间的任何用户操作。 打开预加载 modal 我们也需要调用适当方法:</p>
		<p>$$.loading(title) - 显示预加载 Modal</p>
		<ul class="List">
			<li>title - 预加载 Modal 的标题，可选。</li>
		</ul>
		<p>$$.unLoading() - 隐藏/关闭 预加载 modal. 因为 预加载 modal 没有任何按钮, 它应该用 JavaScript 来关闭</p>
		<a href="javascript:;" class="Btn BtnPrimary LoadingOnClick">正在加载</a>
		<a href="javascript:;" class="Btn BtnPrimary LoadingOnClickTi">自定义标题</a>
		
		<h4>指示器(indicator)</h4>
		<p>如果你不需要用像预加载Modal这样如此大的modal 窗口去指示活动, 你可以使用简单并且小的指示器:</p>
		<p>$$.indicator() - 显示指示器 Modal</p>
		<p>$$.unIndicator() -  隐藏/关闭指示器 modal. 因为指示器modal没有任何按钮, 它需要用JavaScript来关闭</p>
		<a href="javascript:;" class="Btn BtnPrimary Indicator">指示器</a>
		
		
	</div>

</div>
<script type="text/javascript" src="../../../script/kelat.js"></script>
<script type="text/javascript">
$$(document).ready(function(){

$$('.LoadingOnClick').click(function(){
	$$.loading()
	setTimeout(function () {
		$$.unLoading();
	}, 2000);
})

$$('.LoadingOnClickTi').click(function(){
	$$.loading('自定义标题')
	setTimeout(function () {
		$$.unLoading();
	}, 2000);
})

$$('.Indicator').click(function(){
	$$.indicator()
	setTimeout(function () {
		$$.unIndicator();
	}, 2000);})
});
</script>
</div>
</body>
</html>
